<template>
  <a-modal :title="title" :width="800" :maskClosable="false" :visible="visible" @cancel="visible = false">
    <a slot="footer">
      <a-button v-if="cancelText" @click="visible = false">{{ cancelText }}</a-button>
      <a-button v-if="okText == '确定'" type="primary" :loading="button_loading" @click="handleSubmit">{{ okText }}</a-button>
      <a-button v-if="okText == '关闭'" type="primary" @click="visible = false">{{ okText }}</a-button>
    </a>
    <a-spin :indicator="indicator" :spinning="spinning" :tip="tip">
      <div class="spin-content">
        <a-descriptions title="基本信息">
          <a-descriptions-item label="姓名">
            {{ data.Student.Name }}
          </a-descriptions-item>
          <a-descriptions-item label="出生年月">
            {{ data.Student.Birthday }}
          </a-descriptions-item>
          <a-descriptions-item label="性别">
            {{ data.Student.Sex }}
          </a-descriptions-item>
          <a-descriptions-item label="指导老师">
            {{ data.Student.Teacher }}
          </a-descriptions-item>
          <a-descriptions-item label="填表人">
            {{ data.Student.Preparer }}
          </a-descriptions-item>
          <a-descriptions-item label="电话号码">
            {{ data.Student.Phone }}
          </a-descriptions-item>
        </a-descriptions>
        <div class="tableTitle">评测列表</div>
        <a-table :rowKey="record => record.id" :columns="columns" :data-source="data.ERLModel" :defaultExpandAllRows="true" :pagination="false">
          <a-table slot="expandedRowRender" slot-scope="text" :columns="innerColumns" :data-source="text.QuestionScoreList" :pagination="false"> </a-table>
        </a-table>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { uploadImage, getImg, studentInfo } from '@/api/students'
import { mapActions, mapGetters } from 'vuex'
import { dropList } from '@/api/drop'
import dropValue from '@/views/dropValue'
import moment from 'moment'
export default {
  components: {},
  props: {
    actionType: {
      type: String,
      required: true
    },
    display: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      a: null,
      headers: {
        authorization: 'authorization-text'
      },
      columns: [
        {
          title: '题号',
          dataIndex: 'Number',
          key: 'Number',
          align: 'center'
        },
        {
          title: '分类',
          dataIndex: 'CategroyName',
          key: 'CategroyName',
          align: 'center'
        },

        // {
        //   title: '分数',
        //   dataIndex: 'QuestionScoreList',
        //   key: 'QuestionScoreList',
        //   scopedSlots: { customRender: 'QuestionScoreList' },
        //   align: 'center'
        // },
        {
          title: '结果',
          dataIndex: 'Result',
          key: 'Result',
          align: 'center'
        },
        {
          title: '指导建议',
          dataIndex: 'Proposal',
          key: 'Proposal',
          align: 'center'
        }
      ],
      innerColumns: [
        {
          title: '问题描述',
          dataIndex: 'QuestionDescribe',
          key: 'QuestionDescribe'
        },
        {
          title: '分数',
          dataIndex: 'Score',
          key: 'Score',
          align: 'center'
        }
      ],
      currentId: null,
      required: false,
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      form: this.$form.createForm(this),
      button_loading: false,
      spinning: false,
      tip: null,
      title: '添加测评详情',
      visible: false,
      uploadParams: {
        tablename: 'Budget',
        signname: null
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 19 }
        }
      },
      data: {
        ERLModel: [],
        Student: {
          Name: null,
          Sex: null,
          Birthday: null,
          Phone: null,
          Teacher: null,
          Preparer: null
        }
      },
      okText: '确定',
      cancelText: '取消'
    }
  },
  watch: {},
  computed: { ...mapGetters(['token']) },
  methods: {
    getImg,
    moment,
    buttonText(actionType) {
      if (actionType == 'view') {
        this.okText = '关闭'
        this.cancelText = null
      } else {
        this.okText = '确定'
        this.cancelText = '取消'
      }
    },
    clearData() {
      Object.assign(this, {
        tip: '数据获取中...',
        ageGroupValue: null
      })
    },
    choosed(data) {
      this.choosedStudent = data
      if (data.length > 0) {
        studentInfo({ id: data[0].id }).then(res => {
          this.StudentInfo = res.data.StudentInfo
        })
      } else {
        this.StudentInfo = {
          photoUrl: null,
          name: null,
          sex: null,
          IDNumber: null
        }
      }
      this.choosedStudentWatch = data
    },
    closeShareholder(item) {
      this.choosedStudent = this.choosedStudent.filter(a => a.id != item.id)
      this.choosedStudentWatch = this.choosedStudentWatch.filter(a => a.id != item.id)
    },
    add(value) {
      Object.assign(this, {
        visible: true,
        title: '添加测评详情'
      })
      this.clearData()
      this.form.resetFields()
      this.ageGroupValue = value
      setTimeout(() => {
        this.buttonText(this.actionType)
      }, 500)
    },
    edit(data) {
      Object.assign(this, {
        spinning: true,
        visible: true,
        title: '修改测评详情'
      })
      this.form.resetFields()
      this.initData(data)
      this.buttonText(this.actionType)
    },
    view(data) {
      Object.assign(this, {
        spinning: true,
        visible: true,
        title: '查看测评详情'
      })
      this.form.resetFields()
      this.initData(data)
      this.buttonText(this.actionType)
    },
    initData(data) {
      setTimeout(() => {
        data.ERLModel.map((value, index) => {
          value.id = index
        })
        this.data = data
        this.spinning = false
      }, 1000)
    },
    handleSubmit() {
      const {
        form: { validateFields }
      } = this
      validateFields((errors, values) => {
        if (!errors) {
          this.tranData(values)
        } else {
        }
      })
    },
    tranData(values) {
      var _this = this
      this.button_loading = true
      setTimeout(() => {
        const value = {
          ...values,
          ageGroupId: this.ageGroupValue,
          addUserID: this.actionType === 'edit' ? null : this.token.id,
          editUserID: this.actionType === 'add' ? null : this.token.id
        }
        this.button_loading = false
        this.$emit('save', value, this.currentId)
        this.visible = false
      }, 1000)
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    setRowClassName(record, idx) {
      return idx % 2 == 1 ? 'bg-zebra-pattern' : ''
    }
  },
  created() {
    dropList({ categoryId: dropValue.questionDict }).then(res => {
      this.questionDict = res
    })
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
.tableTitle {
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}
/deep/.ant-card-head {
  color: #ffffff;
  background-color: @primary-color;
}
/deep/.ant-popover-inner-content {
  padding: 0;
}
.ant-form-item {
  margin-bottom: 4px;
}
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-list-picture-card-container {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.notclickn {
  pointer-events: none;
}

.viewless {
  /deep/.ant-input-number {
    border: none;
    background: transparent;
  }

  /deep/.ant-input {
    border: none;
    background: transparent;
  }

  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /deep/.ant-input-disabled {
    color: rgba(0, 0, 0, 0.65);
    cursor: default;
  }

  /deep/.ant-select-disabled {
    color: rgba(0, 0, 0, 0.65);
  }

  // /deep/.ant-modal-content {
  //   pointer-events: unset;
  // }
  /deep/.ant-select-selection--single {
    border: none;
    background: transparent;
  }

  /deep/.ant-select-arrow .ant-select-arrow-icon {
    display: none;
  }

  /deep/.anticon {
    display: none;
  }

  /deep/.vue-treeselect div,
  .vue-treeselect span {
    border: none;
  }

  /deep/.vue-treeselect__x-container {
    display: none;
  }

  /deep/.vue-treeselect__control-arrow-container {
    display: none;
  }
}
</style>
